<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>flow-pdf Document</title>
</head>

<body>

</body>

<style>
  html,
  body {
    margin: 0;
    padding: 0
  }

  body {
    font-size: 16px;
    line-height: 23px;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  img {
    max-width: min(100%, 750px);
    height: auto;
    margin: auto;
  }

  .inline-img {
    max-height: 16px;
    vertical-align: middle;
  }

  .shot {
    border: 1px double black;
    border-radius: 5px;
  }

  p {
    text-indent: 2em;
    margin-bottom: 20px;

    font-size: 18.4px;
    line-height: 29.44px;

    max-width: 750px;
  }
</style>
<script>
  function loadImage(img, src, maxRetries, delay) {
    let retries = 0;

    img.onerror = function () {
      if (retries < maxRetries) {
        const nextDelay = delay * Math.pow(2, retries);
        retries++;

        setTimeout(function () {
          img.src = src;
        }, nextDelay);
      } else {
        console.error("can't load image, src =", src);
      }
    };

    img.src = src;
  }

  window.onload = function () {
    const images = document.getElementsByTagName("img");

    for (let i = 0; i < images.length; i++) {
      loadImage(images[i], images[i].src, 3, 1000);
    }
  };
</script>

</html>